<template>
  <div class="sickroom">
    <!-- Breadcrumb 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>医院后台</el-breadcrumb-item>
      <el-breadcrumb-item>病房管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片内容 -->
    <el-container>
      <!-- 侧边栏容器 -- 病房信息 -->
      <el-aside>
        <!----- 病房信息 - 头部 ------>
        <el-card shadow="never" border="false" :body-style="{ padding: '5px 10px !important' }">
          <div class="header">
            <span style="margin-left: 15px">病房信息</span>
            <el-select v-model="inputValue" placeholder="病房类型" style="width: 110px; border: none" @change="updateSelectedType">
              <el-option label="普通病房" value="普通病房"></el-option>
              <el-option label="单人病房" value="单人病房"></el-option>
              <el-option label="重置" value="重置"></el-option>
            </el-select>
          </div>
        </el-card>
        <!----- 病房信息 - 房间信息 ------>
        <el-card :body-style="{ padding: '20px 10px !important' }" v-for="item in newSickroom" :key="item.roomID">
          <div @click="showRoomInfo(item.patientID, item.roomID)" style="">
            <span v-if="item.type === '普通病房'">普通病房 {{ item.roomID }}</span>
            <span v-else>单人病房 {{ item.roomID }}</span>
            <span style="float: right; font-size: 13px">护士 - {{ getNurseName(item.nurseID) }}</span>
            <!-- 房间状态 -->
            <div class="room">
              <span v-for="n in 4" :key="n" style="padding-top: 10px; height: 25px">
                <el-button v-if="item.patientID[n - 1] !== ''" type="primary"></el-button>
                <el-button v-else type="info"></el-button>
              </span>
            </div>
          </div>
        </el-card>
      </el-aside>

      <!-- 主要区域容器 -- 病房信息 -->
      <el-main>
        <!-- 病房 - 患者信息 -->
        <template>
          <!-- 图表，显示病房床位信息 -->
          <el-card style="width: 100%; height: 90%; display: flex; justify-content: center">
            <div ref="chartBox" class="chart-box" style="height: 500px; transform: scale(0.8); width: 900px; padding: 0"></div>
          </el-card>
        </template>
        <!-- 患者信息 -->
        <template>
          <el-card v-for="(item, index) in patientDate" :key="item.patientID">
            <template v-if="item !== ''">
              <el-row>
                <el-col :span="35" style="font-size: 16px; font-weight: 600; margin-bottom: 5px">{{ roomID }}病房-患者基本信息</el-col>
              </el-row>
              <el-row>
                <el-col :span="7" style="font-size: 14px; margin: 5px">
                  <el-avatar>{{ item.name }}</el-avatar>
                </el-col>
                <el-col :span="12" style="font-size: 14px; margin: 5px">
                  <span>床号：{{ index + 1 }}</span>
                </el-col>
                <el-col :span="12" style="font-size: 14px; margin: 5px">姓名：{{ item.name }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="7" style="font-size: 14px; margin: 5px">性别：{{ item.sex }}</el-col>
                <el-col :span="8" style="font-size: 14px; margin: 5px">年龄：{{ item.age }}</el-col>
              </el-row>
              <el-row>
                <el-col :span="30" style="font-size: 14px; margin: 5px">入院时间：{{ item.time }}</el-col>
                <el-col :span="30" style="font-size: 14px; margin: 5px">
                  居住地：{{ item.address }} <el-tag size="small">{{ item.addressType }}</el-tag>
                </el-col>
                <el-col :span="35" style="font-size: 14px; margin: 5px">进度跟踪：{{ item.stage }}</el-col>
              </el-row>
            </template>
            <!-- 该床位没有患者 -->
            <template v-else>
              <el-empty description="暂无患者入住信息"></el-empty>
            </template>
          </el-card>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
//导入 vuex 中辅助函数

import { mapState } from 'vuex';
import * as echarts from 'echarts';

export default {
  name: 'SickroomIndex',

  data() {
    return {
      newSickroom: [], //存放store导入的数据
      inputValue: '', //辅助病房类型筛选
      patientDate: [], //存放病人信息
      roomID: '',
    };
  },

  computed: {
    ...mapState('sickroom', ['room']), //引入store中sickroom模块的state数据 room
    ...mapState('nurse', ['nurses']),  //引入store中 nurse模块的state数据 nurses
    ...mapState('patient', ['patients']),  //引入store中patient模块的state数据 patients
  },

  mounted() {
    this.newSickroom = this.room;
    // console.log(this.newSickroom);
    // 存到myChart变量中
    this.myChart = echarts.init(this.$refs.chartBox);
    // echarts图表内容
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
      },
      legend: {
        data: ['普通-空闲', '普通-入住', '单人-空闲', '单人-入住'],
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          selectedMode: 'single',
          radius: [0, '30%'],
          label: {
            position: 'inner',
            fontSize: 14,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1548, name: '普通病房' },
            { value: 775, name: '单人病房', selected: true },
          ],
        },
        {
          name: '空闲 / 入住情况',
          type: 'pie',
          radius: ['45%', '60%'],
          labelLine: {
            length: 30,
          },
          label: {
            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            backgroundColor: '#F6F8FC',
            borderColor: '#8C8D8E',
            borderWidth: 1,
            borderRadius: 4,
            rich: {
              a: {
                color: '#6E7079',
                lineHeight: 22,
                align: 'center',
              },
              hr: {
                borderColor: '#8C8D8E',
                width: '100%',
                borderWidth: 1,
                height: 0,
              },
              b: {
                color: '#4C5058',
                fontSize: 14,
                fontWeight: 'bold',
                lineHeight: 33,
              },
              per: {
                color: '#fff',
                backgroundColor: '#4C5058',
                padding: [4, 4],
                borderRadius: 4,
              },
            },
          },
          data: [
            { value: 1048, name: '普通-空闲' },
            { value: 335, name: '普通-入住' },
            { value: 310, name: '单人-空闲' },
            { value: 251, name: '单人-入住' },
          ],
        },
      ],
    };
    this.myChart.setOption(option);
  },

  methods: {
    //筛选房间类型数据
    updateSelectedType(value) {
      if (value == '重置') this.newSickroom = this.room;
      else this.newSickroom = this.room.filter(item => item.type.includes(this.inputValue));
    },

    //查看病房具体信息按钮 -- 患者入住情况
    showRoomInfo(data, roomID) {
      //每次点击清空数组
      this.patientDate = [];
      // 将患者信息存入数组
      for (let i = 0; i < data.length; i++) {
        const newPatient = this.patients.filter(item => item.patientID === data[i]);
        //传入患者信息为空时
        if (newPatient.length === 0) this.patientDate.push('');
        //传入患者信息不为空时
        else this.patientDate.push(newPatient);
      }
      // 将数组中的嵌套数组“拉平”，使其变成一维数组。
      this.patientDate = this.patientDate.flat();
      console.log(this.patientDate);
      this.roomID = roomID;
    },

    //通过护士ID查询护士姓名
    getNurseName(id) {
      // 使用filter函数过滤出匹配的护士对象
      const nurse = this.nurses.filter(nurse => nurse.nurseID === id);
      // 如果找到匹配的护士，返回其姓名
      if (nurse.length > 0) return nurse[0].name;
      // 如果没有找到匹配的护士，返回一个默认值
      return '未安排';
    },
  },
};
</script>

<style lang="scss" scoped>
.sickroom {
  width: 100%;
  height: 97%;

  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: transparent;
  }

  //Breadcrumb 面包屑样式
  .el-breadcrumb {
    margin-top: 10px;
    margin-bottom: 25px;
  }
  //布局
  .el-container {
    width: 100%;
    height: 97%;
    padding: 0;
    float: left;
    overflow: auto;
    .el-aside {
      padding: 0;
      float: right;
      .el-card {
        margin-top: 10px;
        //卡片头部样式
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 16px;
          font-weight: 700;
          ::v-deep .el-input__inner {
            border: none;
            box-shadow: none;
          }
        }
        //病房房间
        .room {
          display: flex;
          justify-content: space-around;
        }
      }
    }
    .el-main {
      padding: 0;
      margin-left: 10px;
      float: right;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: center;
      .el-card {
        width: 48%;
        height: 48%;
        position: relative;
        margin-top: 10px;
        .el-tag {
          margin-left: 15px;
        }
        .el-empty {
          width: 50%;
          height: 50%;
          position: absolute;
          top: 25%;
          left: 25%;
        }
      }
    }
  }
}
</style>